<script setup>
import { Switch } from "@element-plus/icons-vue";
import { isEmpty, debounce } from "@/utils/tools.js";
import { translation } from "@/api/modules/translate.js";

const loading = ref(false);

const inputParams = ref({
  input: null,
  sourceLanguage: "AUTO",
  targetLanguage: "EN",
  channel: "GOOGLE",
});
const outputValue = ref(null);

const handleInput = debounce(async () => {
  loading.value = true;
  if (isEmpty(inputParams.value.input)) {
    outputValue.value = null;
  } else {
    const { data } = await translation(inputParams.value);
    outputValue.value = data.output;
  }
  loading.value = false;
});
</script>

<template>
  <PageMain :dividerEnable="false">
    <div class="translate">
      <!-- 搜索框操作 -->
      <el-form
        :inline="true"
        :model="inputParams"
      >
        <!-- 源语言 -->
        <el-form-item>
          <el-select v-model="inputParams.sourceLanguage">
            <el-option
              label="自动检测"
              value="AUTO"
            />
            <el-option
              label="中文简体"
              value="ZH_CN"
            />
            <el-option
              label="中文繁体"
              value="ZH_TW"
            />
            <el-option
              label="英文"
              value="EN"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-icon><Switch /></el-icon>
        </el-form-item>
        <!-- 目标语言 -->
        <el-form-item>
          <el-select v-model="inputParams.targetLanguage">
            <el-option
              label="中文简体"
              value="ZH_CN"
            />
            <el-option
              label="中文繁体"
              value="ZH_TW"
            />
            <el-option
              label="英文"
              value="EN"
            />
          </el-select>
        </el-form-item>
        <!-- 渠道 -->
        <el-form-item label="调用渠道:">
          <el-select v-model="inputParams.channel">
            <el-option
              label="AI"
              value="AI"
            />
            <el-option
              label="谷歌"
              value="GOOGLE"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 输入输出展示 -->
      <div class="main">
        <el-input
          v-model="inputParams.input"
          type="textarea"
          resize="none"
          placeholder="输入文本内容"
          :rows="6"
          @input="handleInput"
        />
        <div
          class="output"
          v-loading="loading"
          element-loading-text="正在翻译中, 请稍等..."
        >
          {{ outputValue }}
        </div>
      </div>
    </div>
  </PageMain>
</template>

<style lang="scss" scoped>
.translate {
  width: 100%;
  height: 100%;
  .el-form {
    display: flex;
    align-items: center;
    .el-form-item {
      margin-right: 10px;
      margin-bottom: 10px;
    }
    .el-select {
      width: 120px;
    }
  }
  .main {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .el-textarea {
      flex: 1;
      margin-right: 10px;
    }
    .output {
      flex: 1;
      padding: 5px 11px;
      box-sizing: border-box;
      border: var(--el-border);
    }
  }
  .box {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
